<template>
  <div class="container">
    <div class="head flex-col">
      <div class="flex-grow-1 flex-row">
        <div class="flex-grow-0 flex-y-center mg-l">
          <img class="userpic" src="@/assets/images/2.jpg">
        </div>
        <div class="flex-grow-1 flex-col flex-x-center mg-l userinfo">
          <div class="username">隔壁老王</div>
          <div class="subtit">会员等级：普通会员</div>
          <div class="subtit">积分余额：350</div>
          <div class="">
            <router-link to=" " class="link">一键退换</router-link>
            <router-link to=" " class="link mg-l">免费试租</router-link>
          </div>
        </div>
      </div>
      <div class="flex-grow-0 flex-row pd-t-b">
        <router-link to="wodeguanzhu" class="link flex-grow-1 flex-x-center">我的关注</router-link>
        <div class="line flex-grow-0"></div>
        <router-link to="wodeshoucang" class="link flex-grow-1 flex-x-center">我的收藏</router-link>
        <div class="line flex-grow-1-0"></div>
        <router-link to="wodezuji" class="link flex-grow-1 flex-x-center"> 我的足迹</router-link>
      </div>
    </div>

    <!-- 我的订单 -->
    <van-cell-group class="mg-t">
      <van-cell  is-link  url="#/order?id=2">
      <img src="@/assets/images/icon/myorder.png" class="icon">我的订单
      </van-cell>
      <van-cell   is-link>
      	   <div class="flex-row flex-x-center flex-y-center">
      	   	    <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="order">
                  <span class="status-num">5</span>
      	   	    	<img src="@/assets/images/icon/order-receive.png" class="orderIcon">
      	   	    	<div>待收货</div>
      	   	    </router-link>
      	   	    <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="order">
      	   	    	<img src="@/assets/images/icon/order-back.png" class="orderIcon">
      	   	    	<div>待归还</div>
      	   	    </router-link>
      	   	    <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="order">
      	   	    	<img src="@/assets/images/icon/order-finish.png" class="orderIcon">
      	   	    	<div>已完成</div>
      	   	    </router-link>
      	   	    <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="order">
      	   	    	<img src="@/assets/images/icon/order-comment.png" class="orderIcon">
      	   	    	<div>待评价</div>
      	   	    </router-link>
      	   	     <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="order">
      	   	    	<img src="@/assets/images/icon/order-back.png" class="orderIcon">
      	   	    	<div>退款</div>
      	   	    </router-link>
      	   </div>
      </van-cell>
    </van-cell-group>


    <!-- 我的钱包 -->
    <van-cell-group class="mg-t">
      <van-cell  is-link>
      <img src="@/assets/images/icon/pocket.png" class="icon">我的钱包
      </van-cell>
      <van-cell >
      	   <div class="flex-row flex-x-center flex-y-center">
      	   	    <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="wodeyajin">
      	   	    	<div>199.00</div>
      	   	    	<div>支付押金</div>
      	   	    </router-link>
      	   	    <div class="line"></div>
      	   	    <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="wodejifen">
      	   	    	<div>122</div>
      	   	    	<div>我的积分</div>
      	   	    </router-link>
      	   	      <div class="line"></div>
      	   	    <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="wodeshouyi">
      	   	    	<div>199.00</div>
      	   	    	<div>我的收益</div>
      	   	    </router-link>
      	   	      <div class="line"></div>
      	   	    <router-link class="flex-col flex-x-center flex-y-center flex-grow-1 link" to="youhuijuan">
      	   	    	<div>100</div>
      	   	    	<div>优惠券</div>
      	   	    </router-link>
      	   </div>
      </van-cell>
    </van-cell-group>

     <!-- 会员 -->
      <van-cell-group class="mg-t">
      <van-cell  is-link  url="#/shimingrenzhen">
         <img src="@/assets/images/icon/item-id.png" class="icon">实名认证
      </van-cell>
       <van-cell  is-link >
         <img src="@/assets/images/icon/item-member.png" class="icon">会员权限
      </van-cell>
       <van-cell  is-link >
         <img src="@/assets/images/icon/item-friend.png" class="icon">邀请好友
      </van-cell>
       <van-cell  is-link  url="#/hehuofenxiao">
         <img src="@/assets/images/icon/item-sale.png" class="icon">合伙分销
      </van-cell>
      <van-cell  is-link  url="#/wodetuandui">
         <img src="@/assets/images/icon/item-team.png" class="icon">我的团队
      </van-cell>
       <van-cell  is-link >
         <img src="@/assets/images/icon/item-ticket.png" class="icon">发票
      </van-cell>
      </van-cell-group>

      <!-- 问题 -->
      <van-cell-group class="mg-t">
      <van-cell  is-link >
         <img src="@/assets/images/icon/item-problem.png" class="icon">常见问题
      </van-cell>
       <van-cell  is-link url="#/tousujianyi">
         <img src="@/assets/images/icon/item-advice.png" class="icon">投诉建议
      </van-cell>
       <van-cell  is-link  url="#/guanyuwomen">
         <img src="@/assets/images/icon/item-question.png" class="icon">关于我们
      </van-cell>
       <van-cell  is-link >
         <img src="@/assets/images/icon/item-cooperation.png" class="icon">合作共赢
      </van-cell>
      </van-cell-group>

       <!-- 归还地址 -->
      <van-cell-group class="mg-t">
      <van-cell  is-link url="#/dizhiguanli">
         <img src="@/assets/images/icon/item-address.png" class="icon">地址管理
      </van-cell>
       <van-cell  is-link >
         <img src="@/assets/images/icon/item-service.png" class="icon">24小时服务热线
      </van-cell>
      </van-cell-group>
  </div>
</template>
<script>
	export default({
		data(){
			return{

			}
		},
		mounted(){
			console.log(this.$route.query.id)
		}
	})
</script>
<style scoped lang="less">
.container{
    position: fixed;
    top: 0;
    bottom: 2.5rem;
    left: 0;
    height: auto;
    width: 100%;
}
.head {
  height: 10rem;
  background-color: #333;

  .userinfo {
    div {
      padding: .3rem 0;
    }
    .link {
      color: #eee;
      padding: .1rem .5rem;
      height: 1rem;
      border: 1px solid #eee;
      border-radius: .5rem;
      font-size: .6rem;
    }
    .username {
      font-size: .8rem;
      font-weight: bold;
      color: #fff;
    }
  }
  .userpic {
    height: 4rem;
    width: 4rem;
    border-radius: 50%;
    margin: 0 1rem;
  }
  .line {
    width: 1px;
    height: 1rem;
    background-color: #eee;
  }
  .link {
    color: #fff;
    font-size: .75rem;
  }
}
.icon{
	height:.8rem;
	width:.8rem;
	margin-right:.3rem;
}
 .line {
    width: 1px;
    height: 1rem;
    background-color: #999;
  }
  .orderIcon{
  	height:.9rem;
  	width:.9rem;
  }
.link{
  color:#000;
}
.status-num{
  position:absolute;
  height:.7rem;
  width:.7rem;
  line-height:.7rem;
  text-align:center;
  background-color:#F75B93;
  color:#fff;
  margin-top:-.8rem;
  margin-left:.6rem;
  font-size:.4rem;
  border-radius:50%;
}
</style>
